<template>
  <main>
    <div class="article">
      <!-- 文章 -->
      <h2>文章</h2>
      <div class="artcontent">
        <div
          class="articleitems"
          v-for="(item, index) in proarticle"
          :key="item.nm"
        >
          <!-- 文章组件 -->
          <Atricleitems :item="item" :index="index" />
        </div>
        <!-- 按钮组件 -->
        <Probtn tit="文章" path="/atricle" />
      </div>
    </div>
    <div class="topic">
      <h2>话题</h2>
      <ul>
        <li v-for="value in Topiclistbefore" :key="value.id">
          <i>#</i>
          <h3>{{ value.mdtit }}</h3>
          <span>{{ value.mdiscussionnum }}条讨论</span>
        </li>
      </ul>
      <Probtn tit="话题" path="/topic" />
    </div>
    <div class="invitation">
      <!-- 帖子 -->
      <h2>帖子</h2>
      <div
        class="obedient"
        v-for="(val, index) in proarticle"
        :key="val.nm"
        :class="{ noborder: index == 2 }"
      >
        <!-- 帖子里的每一项 -->
        <h1>{{ val.atit }}</h1>
        <p>#&emsp;{{ val.article }}</p>
        <Mine :item="val" />
      </div>
      <Probtn tit="帖子" path="/topic" />
    </div>
    <div class="pro">
      <h2>产品</h2>
      <div
        class="proease"
        v-for="(proitem, index) in Productlistbefore"
        :key="proitem.pro_id"
        currency=" "
      >
        <Pro :item="proitem" :index="index" />
      </div>
      <Probtn tit="产品" path="/pro" />
    </div>
    <div class="element">
      <h2>成分</h2>
      <div class="elitems">
        <h1>哦的包</h1>
        <p>akjdhfau</p>
        <ul>
          <li>抗衰老</li>
          <li>抗衰老</li>
        </ul>
      </div>
      <Probtn tit="成分" path="/element" />
    </div>
  </main>
</template>
<script>
//import { Card } from "vant";
import Probtn from "../../product/Probtn.vue";
import Mine from "../../product/mine.vue";
import Pro from "../../product/Pro.vue";
import { mapGetters, mapActions } from "vuex";
import Atricleitems from "../Atricleitems.vue";
export default {
  components: {
    //VanCard: Card,
    Probtn,
    Mine,
    Pro,
    Atricleitems,
  },
  computed: {
    ...mapGetters(["proarticle", "Topiclistbefore", "Productlistbefore"]),
  },
  mounted() {
    //console.log(this.proarticle);
    this.Getindexartasync(); //
    this.GetTopiclistasync();
    this.GetProductlistasync();
  },
  methods: {
    ...mapActions([
      "Getindexartasync",
      "GetTopiclistasync",
      "GetProductlistasync",
    ]),
  },
};
</script>
<style lang="less">
@import "../../../../../assets/css/var.less";
main {
  .noborder {
    border: none !important;
  }
  .protit();
  h2 {
    font-size: @m-font;
    color: #000000;
    padding: 3px @m-font;
  }
  .article {
    margin-bottom: @m-font;
  }
  .topic {
    //话题
    margin-bottom: @m-font;
    ul {
      padding: 0 @m-font @xxs-font 0;
      margin-left: @m-font;
      li {
        height: 30px;
        display: flex;
        align-items: center;
        i {
          font-size: @s-font;
          color: @ts-color;
          margin-right: 5px;
        }
        h3 {
          font-size: @s-font;
          color: #010101;
          margin-right: 10px;
        }
        span {
          //width: 130px;
          font-size: 10px;
          color: #afafaf;
          font-weight: 400;
        }
      }
    }
  }
  .invitation {
    //帖子
    .obedient {
      //帖子里的每一项
      padding: @xxs-font @m-font @m-font;
      .border();
      h1 {
        height: @xxl-font;
        line-height: @xxl-font;
        font-size: @s-font;
        color: @ts-color;
      }
      p {
        font-size: @xs-font;
        color: #bdbdbd;
        height: @s-font;
        line-height: @s-font;
        .ellipsis();
      }
    }
  }
  .pro {
    //产品
  }
  .element {
    .elitems {
      padding: @m-font;
      h1 {
        font-size: @m-font;
        padding: 4px 0;
      }
      p {
        font-size: 12px;
        padding: 2px 0;
        color: #999999;
      }
      ul {
        padding: 4px 0;
        display: flex;
        li {
          height: @xxl-font+4;
          line-height: @xxl-font;
          font-size: @xs-font;
          border: 2px solid @ts-color;
          border-radius: @xxl-font+4 / 2;
          padding: 0 10px;
          margin-right: 10px;
          color: @ts-color;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
